<template>
  <!-- 底部模板展示 -->
  <scroll-view class="menu-content" scroll-y="true" :show-scrollbar="false">
    <view class="menu-item" v-for="item in myComponentsNames.tab" :key="item">
      <!-- 动态组件 -->
      <component :is="item"></component>
    </view>
  </scroll-view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { myComponentsNames } from "@/components/globalComponents";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup(props, context) {
    const data = reactive({
      myComponentsNames,
    });

    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.menu-content {
  height: calc(100% - 80rpx);
  // 渐变
  background: #eee;
  padding: 10rpx 10rpx;
  box-sizing: border-box;
  .menu-item {
    width: 100%;
    margin-bottom: 20rpx;
    // overflow: hidden;
  }
}
</style>
